<template>
	<div class="ranking">
		<!-- 排行榜头图 start -->
		<div class="ranking-hd">
			<img src="../assets/img/ranking.png" />
		</div>
		<!-- 排行榜头图 end -->

		<!-- 主要展示内容 start -->
		<div class="ranking-bg" v-if="rankList">
			<!-- 排行榜第一栏 start -->
			<el-row class="first-colmun">
				<el-col
					:xs="12"
					:sm="12"
					:md="12"
					:lg="8"
					v-for="item of rankList.slice(0, 2)"
					:key="item.id"
				>
					<!-- 第一层内容 start -->
					<div
						class="first-ranking-item"
						@click="handleDetails(item.rankid)"
					>
						<!-- 图片 start -->
						<div class="ranking-img">
							<img :src="item.imgurl" />
							<div class="fill-screen">
								<i></i>
							</div>
						</div>
						<!-- 图片 end -->
						<!-- 排行名称和前三首音乐 start -->
						<div class="ranking-item">
							<div class="item-name">
								{{ item.rankname }}
							</div>
							<ul class="sing-list">
								<li
									v-for="(item, index) of item.songinfo"
									:key="index"
								>
									<a href=""
										><i>{{ index + 1 }}</i
										>{{ item.songname }}</a
									>
								</li>
							</ul>
						</div>
						<!-- 排行名称和前三首音乐 end -->
					</div>
					<!-- 第一层内容 end -->
				</el-col>

				<!-- 中间的几个 start -->
				<el-col
					:xs="12"
					:sm="12"
					:md="12"
					:lg="8"
					v-for="item of rankList.slice(4, 7)"
					:key="item.id"
				>
					<!-- 第一层内容 start -->
					<div
						class="first-ranking-item"
						@click="handleDetails(item.rankid)"
					>
						<!-- 图片 start -->
						<div class="ranking-img">
							<img :src="item.imgurl" />
							<div class="fill-screen">
								<i></i>
							</div>
						</div>
						<!-- 图片 end -->
						<!-- 排行名称和前三首音乐 start -->
						<div class="ranking-item">
							<div class="item-name">
								{{ item.rankname }}
							</div>
							<ul class="sing-list">
								<li
									v-for="(item, index) of item.songinfo"
									:key="index"
								>
									<a href=""
										><i>{{ index + 1 }}</i
										>{{ item.songname }}</a
									>
								</li>
							</ul>
						</div>
						<!-- 排行名称和前三首音乐 end -->
					</div>
					<!-- 第一层内容 end -->
				</el-col>
				<!-- 中间的几个 end -->

				<!-- 第一层的最后一个 start -->
				<el-col
					:xs="12"
					:sm="12"
					:md="12"
					:lg="8"
					v-for="item of rankList.slice(14, 15)"
					:key="item.id"
				>
					<div
						class="first-ranking-item"
						@click="handleDetails(item.rankid)"
					>
						<div class="ranking-img">
							<img :src="item.imgurl" />
							<div class="fill-screen">
								<i></i>
							</div>
						</div>
						<div class="ranking-item">
							<div class="item-name">
								{{ item.rankname }}
							</div>
							<ul class="sing-list">
								<li
									v-for="(item, index) of item.songinfo"
									:key="index"
								>
									<a href=""
										><i>{{ index + 1 }}</i
										>{{ item.songname }}</a
									>
								</li>
							</ul>
						</div>
					</div>
				</el-col>
				<!-- 第一层的最后一个 end -->
			</el-row>
			<!-- 排行榜第一栏 end -->

			<!-- 品牌榜 start -->
			<el-row class="other-ranking">
				<div class="ranking-title">
					<img src="../assets/img/brand-sing.png" alt="" />
				</div>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(3, 4)"
					:key="item.id"
					@click="handleDetails(item.rankid)"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(18, 19)"
					:key="item.id"
					@click="handleDetails(item.rankid)"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(16, 17)"
					:key="item.id"
					@click="handleDetails(item.rankid)"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
			</el-row>
			<!-- 品牌榜 end -->

			<!-- 新歌榜 start -->
			<el-row class="other-ranking">
				<div class="ranking-title">
					<img src="../assets/img/new-song.png" alt="" />
				</div>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(8, 14)"
					:key="item.id"
					@click="handleDetails(item.rankid)"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(20, 22)"
					:key="item.id"
					@click="handleDetails(item.rankid)"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
			</el-row>
			<!-- 新歌榜 end -->

			<!-- 特色榜 start -->
			<el-row class="other-ranking">
				<div class="ranking-title">
					<img src="../assets/img/special-song.png" alt="" />
				</div>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(17, 18)"
					:key="item.id"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(19, 20)"
					:key="item.id"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(22, 26)"
					:key="item.id"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
			</el-row>
			<!-- 特色榜 end -->

			<!-- 全球榜 start -->
			<el-row class="other-ranking">
				<div class="ranking-title">
					<img src="../assets/img/global-ranking.png" alt="" />
				</div>
				<el-col
					:sm="4"
					:md="4"
					:lg="3"
					v-for="item of rankList.slice(26, 33)"
					:key="item.id"
				>
					<img :src="item.imgurl" />
					<div
						class="fill-screen"
						@click="handleDetails(item.rankid)"
					>
						<i></i>
					</div>
				</el-col>
			</el-row>
			<!-- 全球榜 end -->
		</div>
		<!-- 主要展示内容 end -->
	</div>
</template>
<script>
export default {
	data() {
		return {
			// 排行榜全部图片+文字 start
			rankList: [],
			// 排行榜全部图片+文字 end
		};
	},
	methods: {
		// 跳转到详情页 start
		handleDetails(id) {
			// 跳转到对应的排行详情页
			this.$router.push(`/RankingDetails/${id}`);
		},
		// 跳转到详情页 end
	},
	mounted() {
		this.axios.get("/api").then((res) => {
			res.data.data.info.forEach((item) => {
				item.imgurl = item.imgurl.split("/{size}").join("");
				this.rankList.push(item);
			});
		});
	},
};
</script>
<style lang="scss">
.ranking {
	// 排行榜主要内容 start
	.ranking-bg {
		margin-top: 30px;
		// 第一层的全部内容 start
		.first-colmun {
			.el-col {
				// 第一层 start
				.first-ranking-item {
					cursor: pointer;
					// 排行榜图片 start
					.ranking-img {
						float: left;
						position: relative;
						width: 146px;
						height: 146px;
						img {
							width: 146px;
							height: 146px;
							border-radius: 10px;
						}
						.fill-screen {
							display: none;
							position: absolute;
							top: 0;
							left: 0;
							width: 146px;
							height: 146px;
							border-radius: 10px;
							background-color: rgba(0, 0, 0, 0.4);
							i {
								position: absolute;
								top: 50%;
								left: 50%;
								font-family: "iconfont";
								color: #fff;
								font-size: 50px;
								transform: translate(-50%, -50%);
								&:hover {
									color: #5192fe;
								}
							}
						}
					}
					// 排行榜图片 end

					// 每个项目的内容 start
					.ranking-item {
						margin: 0 20px 20px 0;
						float: left;
						display: flex;
						flex-direction: column;
						width: calc(100% - 156px);
						height: 146px;
						padding-left: 25px;
						border-top-right-radius: 10px;
						border-bottom-right-radius: 10px;
						background-color: #f7f7f7;
						margin-left: -10px;
						box-sizing: border-box;
						// 排行榜的名称 start
						.item-name {
							margin-top: 20px;
							font-size: 18px;
							font-weight: 700;
							color: #333;
						}
						// 排行榜的名称 end

						// 前三首歌曲列表 start
						.sing-list {
							height: 100%;
							margin-top: 5px;
							li {
								overflow: hidden;
								white-space: nowrap;
								text-overflow: ellipsis;
								width: 90%;
								margin: 15px 0;
								font-size: 12px;
								a {
									color: #808080;
									i {
										margin-right: 15px;
									}
								}
							}
						}
						// 前三首歌曲列表 end
					}
					// 每个项目的内容 end
					&:hover {
						.ranking-img {
							.fill-screen {
								display: block;
							}
						}
					}
				}
				// 第一层 end
			}
		}
		// 第一层的全部内容 end

		// 其它的排行榜 样式一样 start
		.other-ranking {
			.ranking-title {
				margin: 30px 0 20px;
			}
			.el-col {
				position: relative;
				margin-bottom: 15px;
				cursor: pointer;
				img {
					width: 90%;
					// height: 100%;
					border-radius: 10px;
				}
				.fill-screen {
					display: none;
					position: absolute;
					top: 0;
					left: 0;
					width: 90%;
					height: 100%;
					border-radius: 10px;
					background-color: rgba(0, 0, 0, 0.4);
					i {
						position: absolute;
						top: 50%;
						left: 50%;
						font-size: 50px;
						font-family: "iconfont";
						color: #fff;
						transform: translate(-50%, -50%);
						&:hover {
							color: #5192fe;
						}
					}
				}
				&:hover {
					.fill-screen {
						display: block;
					}
				}
			}
		}
		// 其它的排行榜 样式一样 end
	}
	// 排行榜主要内容 end
}
</style>
